<template>
  <div class="strut-div" id="partyDues">

  </div>
</template>

<script>
  import partyDues from '../../../../static/ht-party-dues.json'
  import echarts from 'echarts';
  export default {
    mounted() {
      var chart = echarts.init(document.getElementById('partyDues'));;

      let option = {
        title: {
          text: '',
          subtext: ''
        },
        barWidth: 12,
        itemGap: 20,
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: '', // 默认为直线，可选为：'line' | 'shadow' | ''空值没背影
          },
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '3%',
          top:'2%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,

          data:  partyDues[0].data,
          axisLine: {
            show: false
          },
          axisLabel:{
            fontSize:16,
          },
          nameTextStyle:{
            fontSize:18,
            align:'left',
          }
        },
        series: [
          {
            name: '来源百分比',
            type: 'bar',
            data: partyDues[1].data,
            itemStyle: {
              normal: {
                barBorderRadius: 6,
                color: new echarts.graphic.LinearGradient(
                  0, 0, 1, 0,
                  [
                    {offset: 0, color: '#029ED8'},
                    {offset: 1, color: '#20D8BC'}
                  ]
                ),
                label: {
                  show: true,   //显示文本
                  position: 'right',  //数据值位置
                  textStyle: {
                    color: '#FBCC13',
                    fontSize: '16'
                  },
                  formatter: '{c}万'
                }
              },
              emphasis: {
                barBorderRadius: 4
              }
            },
          }
        ],
        textStyle: {
          color: '#E9F4FF'
        }
      };


      chart.setOption(option);
    }
  }
</script>

<style>
</style>
